<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/2.0.1/dist/aos.css" /> <script src="https://cdn.rawgit.com/michalsnik/aos/2.0.1/dist/aos.js"></script> <div class="container"> <div class="row" style="margin-bottom:50px;"> <div class="col-md-4"> <div class="item" data-aos="slide-up">7</div> </div> <div class="col-md-4"> <div class="item" data-aos="slide-up">7</div> </div> <div class="col-md-4"> <div class="item" data-aos="slide-up">7</div> </div> </div> <div class="row" style="margin-bottom:50px;"> <div class="col-md-4"> <div class="item" data-aos="fade-right">3</div> </div> <div class="col-md-4"> <div class="item" data-aos="fade-right">3</div> </div> <div class="col-md-4"> <div class="item" data-aos="fade-right">3</div> </div> </div> </div> <div class="item" data-aos="fade-up">1</div> <div class="item" data-aos="fade-down">2</div> <div class="item" data-aos="fade-right">3</div> <div class="item" data-aos="fade-left">4</div> <div class="item" data-aos="zoom-in">5</div> <div class="item" data-aos="zoom-out">6</div> <div class="item" data-aos="slide-up">7</div> <div class="item" data-aos="flip-up">8</div> <div class="item" data-aos="flip-down">9</div> <div class="item" data-aos="flip-right">10</div> <div class="item" data-aos="fade-right">11</div>

* { box-sizing: border-box; } .item { width: 200px; height: 200px; margin: 50px auto; padding-top: 75px; background: #ccc; text-align: center; color: #FFF; font-size: 3em; }

AOS.init({ duration: 1200, })